<template>
  <view v-if="shenheStatus == 0 && cardData" class="card-detail">
    <!-- 头部卡片信息 -->
    <view class="card">
      <image
        :src="cardData.verify_card_info.bg_pic_url"
        alt=""
        mode="aspectFill"
      />
      <view>
        <view class="card-top flex-x-sb">
          <view class="left flex1 flex">
            <image
              :src="cardData.verify_card_info.pic_url"
              alt=""
              mode="aspectFill"
            />
            <view style="flex: 1; margin-left: 20rpx">
              <view style="font-size: 32rpx; font-weight: 600">{{
                cardData.verify_card_info.name
              }}</view>
              <view style="margin-top: 8rpx; font-size: 28rpx">
                <span v-if="cardData.verify_card_info.type <= 1">{{
                  $t("user.card")
                }}</span>
                <span v-else-if="cardData.verify_card_info.type == 2">{{
                  $t("user.gift")
                }}</span>
                <span v-else-if="cardData.verify_card_info.type == 3">{{
                  $t("title.valueCard")
                }}</span>
                <span v-else-if="cardData.verify_card_info.type == 4">{{
                  $t("user.pass")
                }}</span>
                <span v-else-if="cardData.verify_card_info.type == 5">{{
                  $t("user.video")
                }}</span>
              </view>
            </view>
          </view>
          <span
            v-show="cardData.verify_card_info.type <= 2 && cardData.status == 0"
            @click="
              $utils.toUrl(
                '/user/write_off_card/card_qrcode/card_qrcode?card_sale_id=' +
                  cardData.id
              )
            "
            class="code iconfont icon-QRcode"
            style="font-size: 6vw"
          ></span>
        </view>

        <view class="bianma">
          <span v-show="cardData.verify_card_info.type > 1">{{
            cardData.card_info.user
          }}</span>
        </view>
      </view>
    </view>

    <!-- 中间数量部分 -->
    <view class="card-num flex-y-center">
      <view class="content flex-y-center flex-x-sb">
        <view v-if="cardData.verify_card_info.type <= 1" @click="see">
          <view>{{ $t("coupon.use") }}</view>
          <view
            class="num"
            :class="[cardData.left_num === '0' ? 'disabled' : '']"
          >
            {{
              cardData.left_num === "0"
                ? $t("coupon.used")
                : $t("writeOff.toCancle")
            }}
          </view>
        </view>
        <!-- 礼品卡 -->
        <view
          v-else-if="cardData.verify_card_info.type > 1"
          @click="clickExchange"
        >
          <view>{{ $t("coupon.use") }}</view>
          <!-- 礼品卡 -->
          <view class="num" :class="[cardData.status == '1' ? 'disabled' : '']">
            <!-- {{
              cardData.status == 1
                ? $t("coupon.used")
                : $t("coupon.pickUpGoods")
            }} -->

            {{ getCouponText }}
          </view>
        </view>

        <!-- 核销卡 -->
        <view v-if="cardData.verify_card_info.type <= 1" @click="toNum">
          <view>
            <!-- cardData.use_num == 0 ? $t('user.allCount') : -->
            {{ $t("user.laveCount") }}</view
          >
          <view class="num">{{ cardData.left_num }}</view>
        </view>
        <!-- 礼品卡 -->
        <view v-if="cardData.verify_card_info.type == 2" @click="onGo">
          <view>{{ $t("coupon.goodsNum") }}</view>
          <view class="num">{{
            cardData.verify_card_info.goods_ids.length
          }}</view>
        </view>
        <!-- 储值卡 -->
        <view v-if="cardData.verify_card_info.type == 3">
          <view>{{ $t("coupon.storedPrice") }}</view>
          <view class="num">{{ cardData.verify_card_info.total_price }}</view>
        </view>
        <!-- 虚拟卡 -->
        <view v-if="cardData.verify_card_info.type == 4">
          <view>{{ $t("coupon.cardValue") }}</view>
          <view class="num">{{ cardData.verify_card_info.price }}</view>
        </view>
        <!-- 视频卡 -->
        <view v-if="cardData.verify_card_info.type == 5" @click="onGo">
          <view>{{ $t("coupon.videoNum") }}</view>
          <view class="num">{{
            cardData.verify_card_info.video_ids.length
          }}</view>
        </view>
      </view>
    </view>
<view class="card_qrcode flex">
      <view>
        <image :src="url_path" mode="aspectFill" style="width:100%;height:100%"></image>
      </view>
    </view>
    <view class="card_message">
      <view class="card_account">{{ account }}</view>
      <!-- <view>使用时向核销员出示核销码</view> -->
    </view>
    <!-- 底部链接 -->
    <view class="bottom">
      <view
        @click="
          $utils.toUrl(
            '/user/write_off_card/card-list/password-card?id=' + cardData.id
          )
        "
        class="flex-x-sb borBTm"
        v-if="
          cardData.verify_card_info.type > 1 && (status != 1 || status != 2)
        "
      >
        <view>{{ $t("user.cardPass") }}</view>
        <view class="iconfont icon-arrow-right"></view>
      </view>
      <!-- <view
        @click="
          $utils.toUrl(
            '/user/write_off_card/card-list/record-card?id=' + cardData.id
          )
        "
        class="flex-x-sb"
      >
        <view>{{$t('writeOff.records')}}</view>
        <view class="iconfont icon-arrow-right"></view>
      </view> -->
			<view class="flex-x-sb share borBTm" v-if="
          cardData.is_can_give == 1 &&
          cardData.is_trans_send == 0
        ">
        <button open-type="share" @click="onGive"></button>
        <view> {{ $t("user.sendFri") }} </view>
        <view class="iconfont icon-arrow-right"></view>
      </view>

			<!-- 点击商品折现出现提示框 -->
			<view class="">
				<u-modal :show-title="false" v-model="show" :show-cancel-button="true" @confirm="confirm"
					content="您确定要折现这张卡券么？"></u-modal>
			</view>
			<!-- 添加 1  礼品折现-->
			<view class="Discounted borBTm" @click="discountMoney">
				<view>礼品折现</view>
				<view class="discount">
					<view class="discountTextStyle">可折现 {{'￥'+cardData.verify_card_info.for_cash}} </view>
					<view class="iconfont icon-arrow-right ml10"></view>
				</view>
			</view>
			<!-- 提醒-->
			<view>
				<u-toast ref="uToast" />
			</view>


			<view @click="
          $utils.toUrl(
            '/user/write_off_card/card-list/message-card?id=' + cardData.id
          )
        " class="flex-x-sb borBTm">
        <view> {{ $t("user.moreInfo") }} </view>
        <view class="iconfont icon-arrow-right"></view>
      </view>
      <!-- 删除卡券 -->
			<view @click="deleteItem" class="flex-x-sb borBTm" v-if="status != 2">
        <view> {{ $t("writeOff.deleteCard") }} </view>
        <view class="iconfont icon-arrow-right"></view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
	import writeOffCode from "@/api/writeOffCode.js";
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },
  data() {
    return {
				// 弹出层
				show: false,

      card_id: "",
      cardData: "",
      status: "",
      store_info:"",
      url_path:'',
      account:""
    };
  },
  // 1核销卡  2礼品卡  3储值卡  4虚拟卡  5视频卡
  computed: {
    getCouponText() {
      let { cardData } = this;
      if (!cardData) return;

      let str1;

      switch (cardData.verify_card_info.type) {
        case 2:
          str1 = this.$t("coupon.pickUpGoods");
          break;

        case 3:
          str1 = this.$t("coupon.recharge");
          break;

        case 4:
          str1 = this.$t("coupon.see");
          break;

        case 5:
          str1 = this.$t("coupon.watchOnline");
          break;
      }

      if (cardData.status == 1) {
        str1 = this.$t("coupon.used");
      }

      return str1;
    },
  },

  methods: {
			
			// 点击了确定按钮
			confirm: function() {
				writeOffCode
					.submitDiscount({
						account_id: this.cardData.account_id,
					})
					.then((res) => {
						if (res.code == 0) {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success',
							})
						}
					});
			},

			// 点击礼品折现
			discountMoney: function() {
				this.show = true
			},

			see() {
				let {
					address,
					name,
					coordinate
				} = this.store_info,
					[latitude, longitude] = coordinate.split(",");

      uni.openLocation({
        name,
					latitude: parseFloat(latitude),
					longitude: parseFloat(longitude),
        address,
      });
    },

    // 点击查看核销次数
    toNum() {
      if (this.status == 1 || this.status == 2) {
        uni.showToast({
          title: "该卡券不可用",
          icon: "none",
        });
        return;
      }

      if (this.cardData.left_num === "0") return;

      this.$utils.toUrl(
        "/user/write_off_card/card-list/clerk-record?id=" + this.card_id
      );
    },
    // 已兑换的点击数量跳转
    onGo() {
      if (this.status == 1 || this.status == 2) {
        uni.showToast({
          title: "该卡券不可用",
          icon: "none",
        });
        return;
      }
      if (
        this.cardData.verify_card_info.type == 5 &&
        this.cardData.status == 1
      ) {
        if (this.cardData.video_status == 1) {
          uni.showToast({
            title: "该视频卡已过期！",
            duration: 3000,
            icon: "none",
          });
          return;
        }
        this.$utils.toUrl(
          "/user/write_off_card/card-list/video-card?id=" + this.cardData.id
        );
        return;
      }

      if (this.cardData.verify_card_info.type == 2) {
        this.$utils.toUrl(
          "/user/write_off_card/card-list/shop-card?id=" + this.cardData.id
        );
        return;
      }
    },
    // 获取数据详情
    async getDetail() {
      try {
        const { data } = await this.$allrequest.coupon.verifyDetail(
          {
            sale_id: this.card_id,
          },
          true
        );
        
        this.cardData = data.list;
        this.url_path=data.qrcode.url_path;
        this.account=data.qrcode.account;
        this.store_info = data.store_info;
        this.cardData.verify_card_info.type = parseInt(
          this.cardData.verify_card_info.type
        );
      } catch (error) {
        this.$utils.toast(error.msg || error);
      }
    },
    // 立即兑换
    clickExchange() {
      if (this.status == 1) {
        uni.showToast({
          title: "该卡券不可用",
          icon: "none",
        });
        return;
      }
      if (this.cardData.status == 1) {
        if (this.cardData.verify_card_info.type == 5) {
          if (this.cardData.video_status == 1) {
            uni.showToast({
              title: "该视频卡已过期！",
              duration: 3000,
              icon: "none",
            });
            return;
          }
          this.$utils.toUrl(
            "/user/write_off_card/card-list/video-card?id=" + this.cardData.id
          );
        }
        if (this.cardData.verify_card_info.type == 2) {
          this.$utils.toUrl(
            "/user/write_off_card/card-list/shop-card?id=" + this.cardData.id
          );
        }
        return;
      }
      // 1核销卡  2礼品卡  3储值卡  4虚拟卡  5视频卡
      if (this.cardData.verify_card_info.type == 3) {
        // this.$utils.toUrl(
        //   "/user/write_off_card/card-list/exchange-card?id=" + this.cardData.id
        // );
        uni.showModal({
          title: "提示",
          content: "确认充值？",
          success: (res) => {
            if (res.confirm) {
              this.$allrequest.coupon
                .verifyExchange({
                  sale_id: this.cardData.id,
                })
                .then((res) => {
                  if (!res.code) {
                    uni.showToast({
                      title: "充值成功！",
                      duration: 2000,
                    });
                    this.getDetail();
                  }
                });
            } else if (res.cancel) {
            }
          },
        });
        return;
      }
      if (this.cardData.verify_card_info.type == 2) {
        this.$utils.toUrl(
          "/user/write_off_card/card-list/shop-card?id=" + this.cardData.id
        );
      }
      if (this.cardData.verify_card_info.type == 4) {
        this.$utils.toUrl(
          "/user/write_off_card/card-list/password-card?id=" + this.cardData.id
        );
      }
      if (this.cardData.verify_card_info.type == 5) {
        uni.showModal({
          title: "提示",
          content: "兑换之后将不可赠送，确认兑换？",
          success: (res) => {
            if (res.confirm) {
              this.$allrequest.coupon
                .verifyExchange({
                  sale_id: this.cardData.id,
                })
                .then((res) => {
                  if (!res.code) {
                    uni.showToast({
                      title: "兑换成功！",
                      duration: 2000,
                    });
                    this.getDetail();
                  }
                });
            } else if (res.cancel) {
            }
          },
        });
        return;
      }
    },
    // 赠送好友
    onGive() {
      // #ifdef APP-PLUS
      uni.share({
        provider: "weixin",
        type: 0,
        href: "/user/write_off_card/card-list/get-card?id=" + this.cardData.id,
        scene: "WXSceneSession",
        title: this.$t("user.sendYou"),
        imageUrl: this.cardData.verify_card_info.bg_pic_url
      });
      // #endif
    },
    // 删除卡券
    deleteItem() {
      uni.showModal({
        title: "提示",
        content: "确认删除？",
        success: (res) => {
          if (res.confirm) {
            this.$allrequest.coupon
              .deleteCard({ id: this.cardData.id })
              .then((res) => {
                if (!res.code) {
                  uni.showToast({
                    title: "删除成功！",
                    duration: 2000,
                  });
                  setTimeout(() => {
                    uni.navigateBack();
                  }, 1500);
                }
              });
          } else if (res.cancel) {
          }
        },
      });
    },
  },
  onLoad(params) {
    this.card_id = params?.id;
    this.status = params?.status;
    this.getDetail();
  },
  onShareAppMessage(res) {
    if (res.from == "button") {
			const storeId = uni.getStorageSync("store_id");
      return {
        title: "赠送卡券",
        path: "/user/write_off_card/card-list/get-card?id=" + this.cardData.id + `&store_id=${storeId}`,
        success(res) {
          uni.showToast({
            title: this.$t("home.success"),
          });
        },
        fail(res) {
          uni.showToast({
            title: this.$t("home.fail"),
            icon: "none",
          });
        },
      };
    }
  },
};
</script>

<style lang="scss" scoped>
	.ml10 {
		margin-left: 10rpx;
	}

	.Discounted {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.discount {
		display: flex;
		align-items: center;
	}

	.discountTextStyle {
		color: #8C8C8C;
		font-weight: 400;
		font-size: 26rpx;
	}

.card-detail {
  background: #fff;
  padding: 16rpx 24rpx;
  .icon-arrow-right {
    color: #888;
    font-size: 26rpx;
  }
}
.card-num {
  height: 196rpx;
  > .content {
    flex: 1;
    > view {
      flex: 1;
      height: 100rpx;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #8c8c8c;
      font-size: 26rpx;
      &:nth-child(2) {
        border-left: 1px solid #f1f1f1;
      }
      .num {
        color: #f0250e;
        font-size: 32rpx;
      }

      .disabled {
        color: #8c8c8c;
      }
    }
  }
}

	.borBTm {
		border-bottom: 1px solid #f1f1f1;
	}

.card {
  position: relative;
  height: 380rpx;
  border-radius: 20rpx;
  margin: 20rpx 0;
  overflow: hidden;
  color: #fff;
  > image {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
  }
  > view {
    position: absolute;
    width: 100%;
    height: 100%;
    .card-top {
      margin: 30rpx;
      .left {
        > image {
          width: 92rpx;
          height: 92rpx;
          background: #ffffff;
          border: 2rpx solid #f1f1f1;
          opacity: 1;
          border-radius: 120rpx;
        }
      }
      .code {
        width: 34rpx;
        height: 34rpx;
      }
    }
  }
  .bianma {
    position: absolute;
    bottom: 30rpx;
    left: 30rpx;
  }
}
.bottom {
  > view {
    line-height: 100rpx;
    border-bottom: 1px solid #f1f1f1;
    font-style: 30rpx;
    &:nth-child(1) {
      border-top: 1px solid #f1f1f1;
    }
  }
}
.share {
  position: relative;
  button {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
.card_qrcode {
   width: 300rpx;
   height: 300rpx;
   margin: 0 auto;
}
.card_qrcode view {
  width: 300rpx;
  height: 300rpx;
}

.card_message {
  margin-top: 24rpx;
  font-size: calc(14rpx * 2);
  color: #8c8c8c;
  font-weight: 400;
  text-align: center;
}
.card_message .card_account {
  font-weight: 600;
  font-size: calc(16rpx * 2);
  margin-bottom: calc(12rpx * 2);
  color: #262626;
}
</style>
